<template>
	<view class="repair-task">
	  <!-- 搜索框 -->
	  <view class="search-box">
		<input type="text" v-model="searchText" placeholder="输入需要搜索的内容" class="search-input" @click="search" />
		<text class="search-icon">🔍</text>
	  </view>
	  
	  <!-- 筛选条件 -->
	  <view class="filter-bar">
		<view class="filter-item">
		  <text style="font-size: 10px;">共{{total}}条</text>
		</view>
		<view class="filter-item">
		  <text style="font-size: 10px;">状态</text>
		  <picker @change="onStatusChange" :value="statusIndex" :range="statusOptions">
		    <view class="dropdown">{{statusOptions[statusIndex]}}</view>
		  </picker>
		</view>
		<view class="filter-item">
		  <text style="font-size: 10px;">维修方式</text>
		  <picker @change="onRepairTypeChange" :value="repairTypeIndex" :range="repairTypeOptions" >
		    <view class="dropdown" style="font-size: 14px">{{repairTypeOptions[repairTypeIndex]}}</view>
		  </picker>
		</view>

 
			<view class="filter-item">
				<uni-icons type="calendar" size="20" />
				<uni-datetime-picker
				@change="onDateChange" 
					v-model="date"
					type="date"
					:clear-icon="false"
					style="margin-left: 5px;width: 120px;"
					 :value="selectedDate"
				/>
			</view>

		<!-- <view class="filter-item">
		  <text style="font-size: 10px;">日期</text>
		  <picker 
		    mode="date" 
		    placeholder="日期" 
		    @change="onDateChange" 
		    :start="startDate" 
		    :end="endDate"
		    :value="selectedDate"
			:clear-icon="false"
		  >
		    <view class="dropdown">
			{{selectedDate || '选择'}}
			</view>
		  </picker>
		</view> -->
	  </view>
	  
	  <!-- 维修任务列表 -->
	  <view class="task-list">
		<view v-for="(task, index) in taskList" :key="index" class="task-item">
		  <view class="task-header">
			<text class="task-id">维修单号: {{task.repairId}}</text>
			<text :class="['task-status', task.status == 0 ? 'beforstart' :task.status ==1 ? 'in-progress':'completed']">
			  {{task.status==0?'未开始': task.status==1 ?'进行中':'已完成'}}
			</text>
		  </view>
		  <view class="task-info">
			<view class="info-row">
			  <text class="label">维修方式：</text>
			  <text class="value">{{task.repairWay===0?'到店维修':"上门维修"}}</text>
			</view>
			<view class="info-row">
			  <text class="label">预约日期：</text>
			  <text class="value">{{task.repairTime}}</text>
			</view>
		  </view>
		  <view class="task-footer">
			<button class="detail-btn" @click="viewDetail(task.id)">查看详情</button>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
import  request  from '@/utils/request.js'
  export default {
	data() {
	  return {
		searchText: '',
		total: 3,
		taskList: [],
		statusIndex: 0,
		statusOptions: ['全部','未开始', '进行中', '已完成'],
		repairTypeIndex: 0,
		repairTypeOptions: ['全部', '到店维修', '上门取车'],
		selectedDate: '',
		startDate: this.getStartDate(),
		endDate: this.getEndDate(),
		id:uni.getStorageSync("userinfo"),
		list:0

	  }
	},
	
	onLoad() {
		
		
		this.getWeiXiuTask();
	},
	
	methods: {
	  // 获取起始日期（例如：可选择的最早日期）
	  getStartDate() {
		const date = new Date()
		date.setMonth(date.getMonth() - 24) // 可以选择3个月前的日期
		return this.formatDate(date)
	  },
	  
	  // 获取结束日期（例如：可选择的最晚日期）
	  getEndDate() {
		const date = new Date()
		date.setMonth(date.getMonth() + 3) // 可以选择3个月后的日期
		return this.formatDate(date)
	  },
	  
	  // 日期格式化方法
	  formatDate(date) {
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		return `${year}-${month}-${day}`
	  },

	  viewDetail(id) {
		// 查看详情方法
		console.log('查看详情:', id)
		
		uni.navigateTo({
			url:'/pages/index/weixiurenwu/weixiuxiangqing/weixiuxiangqing?id='+id
		})
		
	  },
	  // 筛选状态
	onStatusChange(e) {
		let that = this;
			that.getWeiXiuTask()
			setTimeout(() => {
				that.statusIndex = e.detail.value
		if(that.statusIndex-1!==-1){
			console.log("512584451546454", that.taskList);
            that.taskList=that.taskList.filter(task => {
				return task.status == that.statusIndex-1;
			})
			console.log("搜索后的维修任务:", that.taskList)
             
		}else{
			that.getWeiXiuTask()
		}
			}, 450);
		
		
	
	},

	//   筛选维修方式
	  onRepairTypeChange(e) {
		
        let that = this;
		that.repairTypeIndex = e.detail.value
		if(that.repairTypeIndex > 0){
			request({ 
				url:'evaluate/reservation/list',
				data:{
					repairWay:that.repairTypeIndex-1,
					merchantid:that.id.id
				},
				success(res){ 
					that.taskList=res.data.rows
					that.taskList = that.taskList.reverse();
					that.total=that.taskList.length				
				}
			})   
		} else {
			that.getWeiXiuTask()
		}
	  },
	  //  筛选日期
	  onDateChange(e) {
		console.log(e,"接收到");
		
		let that = this;
		this.selectedDate = e
       // 这里可以添加筛选逻辑
	    console.log("开始搜索水水水水水",this.selectedDate);
		// 搜索方法
		request({ 
			url:'evaluate/reservation/list',
			data:{
				reservationTime:this.selectedDate,
				merchantid:that.id.id
			},
			success(res){ 
				 console.log('搜索123:', res);
				if(that.repairTypeIndex!==-1 ){
					that.taskList=res.data.rows
					console.log("搜索后的维修任务:", that.taskList);
					that.taskList = that.taskList.reverse();
					that.total=that.taskList.length				
				} if(res===-1){
					that.getWeiXiuTask()
				}
			}
		})   
	  },
	 
    //获得维修任务
    getWeiXiuTask(){
		let that = this;
		request({
			url:'evaluate/reservation/list',
			method:'get',
			data:{
				pageNum:1,
				pageSize:10000
			},
			success:(res=>{
			that.taskList = res.data.rows
            that.total = res.data.total
			console.log(that.id.id,"jnknknjkbhjvhduicfsnke");
			// 使用 filter 方法过滤数组
			that.taskList = that.taskList.filter(item => item.merchantid === that.id.id);
			console.log("过滤后的维修任务:", that.taskList);
			that.taskList = that.taskList.reverse();
			that.total = that.taskList.length
		})
	})

	},
		// 搜索方法
    search() {
		let that = this;
		request({ 
			url:'evaluate/reservation/list',
			data:{
				repairId:that.searchText
			},
			success(res){ 
				if(that.searchText!=='' ){
					that.taskList=res.data.rows
					that.taskList = that.taskList.reverse();
					that.total=that.taskList.length
				}else{
					that.getWeiXiuTask()
				}
			}
		})
	},

  }
  
  }
  </script>
  
  <style>
  .repair-task {
	padding: 20rpx;
	background: #f0f0f0;
  }
  
  .search-box {
	position: relative;
	margin-bottom: 20rpx;
  }
  
  .search-input {
	background: #fff;
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
	padding-right: 60rpx;
  }
  
  .search-icon {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
  }
  
  .filter-bar {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
  }
  
  .filter-item {
	display: flex;
	align-items: center;
  }
  
  .dropdown {
	margin-left: 10rpx;
	color: #333;
	padding: 4rpx 20rpx;
	border-radius: 6rpx;
	position: relative;
	/* #ifdef MP-WEIXIN */
	min-width: 80rpx;
	/* #endif */
	text-align: center;
	/*border:1px solid #007AFF;*/
	/* border: none; */
  }
  
  .dropdown::after {
	content: '';
	position: absolute;
	right: 10rpx;
	top: 50%;
	margin-top: -3rpx;
	border-left: 6rpx solid transparent;
	border-right: 6rpx solid transparent;
	border-top: 6rpx solid #666;
  }
  
  .task-list {
	margin-top: 20rpx;
  }
  
  .task-item {
	background: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
  }
  
  .task-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15rpx;
  }
  
  .task-status {
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
  }
  
  .in-progress {
	color: #007AFF;
  }
  
  .completed {
	color: #34C759;
  }
  .beforstart{
	color: red;
  }
  
  .task-info {
	margin-bottom: 15rpx;
  }
  
  .info-row {
	display: flex;
	margin-bottom: 10rpx;
  }
  
  .label {
	color: #666;
	width: 160rpx;
  }
  
  .task-footer {
	display: flex;
	justify-content: flex-end;
  }
  
  .detail-btn {
	background: #007AFF;
	color: #fff;
	padding: 6rpx 30rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
  }
  </style>